<template>
  <div class="oldPeopleHome">
    <top-bar>
      <p slot="title">预约养老院</p>
      <p slot="right"></p>
    </top-bar>
    <section class="search-box">
      <span @click="gotoSearch">搜索</span>
    </section>
    <scroll class="list-scroll">
      <div class="list">
        <ul class="list-container">
          <li class="list-item" v-for="list in listData" @click="gotoDetail(list.id)">
            <figure class="list-img-wrapper">
              <img src="../../../static/img/oldPeopleHome.png"/>
            </figure>
            <section class="content">
              <h3 class="name">{{list.name}}</h3>
              <p class="supplement">{{list.location}}</p>
              <p class="detail"><span>{{list.level}}</span><span>{{list.selectedNum}}人选择</span></p>
            </section>
          </li>
        </ul>
      </div>
    </scroll>
    <transition name="detail">
      <router-view :data="listData"></router-view>
    </transition>
  </div>
</template>

<script>
    import TopBar from "../../components/top-bar/top-bar";
    import Scroll from "../../components/scroll/scroll";
    import {ERR_OK} from "../../api/config";
    import {getBeadhouses} from "../../api/ajax";

    export default {
      components: {
        Scroll,
        TopBar},
      name: "old-people-home",
      data () {
        return {
          listData: []
        }
      },
      created () {
        this._getBeadhouses()
      },
      methods: {
        _getBeadhouses () {
          getBeadhouses().then((res) => {
            let response = res.data
            if (response.code === ERR_OK) {
              this.listData = res.data.result
            }
          }).catch((err) => {
            console.log('获取失败')
          })
        },
        gotoSearch () {
          this.$router.push('/search')
        },
        gotoDetail (listId) {
          this.$router.push(
            {
              path: "/oldPeopleHome/OldPeopleHomeDetail",
              query: {
                id: listId
              }
            }
          )
        }
      }
    }
</script>

<style scoped lang="scss">
  @import "../../common/sass/mixin";

  .oldPeopleHome{
    background-color: $bc;
    height: 100vh;
    position: relative;
    padding-top: 90px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .search-box{
      padding: 14px 20px;
      display: flex;
      justify-content: center;
      color: $fgc;
      span{
        padding: 0 48px;
        line-height: 50px;
        background-color: #ffffff;
        width: 100%;
        border: 1px solid $borderCor;
        border-radius: 5px;
        @include font-dpr(24px);
        background-image: url("../../../static/img/search.png");
        background-repeat: no-repeat;
        background-position: center left 14px;
        background-size: 24px 24px;
      }
    }
    .list-scroll{
      flex: 1;
      overflow: hidden;
      .list{
        .list-container{
          .list-item{
            display: flex;
            align-items: center;
            background-color: #ffffff;
            .list-img-wrapper{
              margin: 0 30px;
              border-radius: 10px;
              width: 136px;
              height: 100px;
              img{
                width: 100%;
                height: 100%;
                border-radius: 10px;
              }
            }
            .content{
              border-bottom: 1px solid $borderCor;
              padding: 20px 30px 20px 0;
              flex: 1;
              .name{
                @include font-dpr(28px);
                color: $fbc;
              }
              .supplement{
                @include font-dpr(24px);
                color: $fgc;
              }
              .detail{
                @include font-dpr(24px);
                display: flex;
                color: $fgc;
                span{
                  &:first-child{
                    flex: 1;
                    color: $priceCor;
                  }
                }
              }
            }
            &:last-child{
              .content{
                border: none;
              }
            }
          }
        }
      }
    }
  }
  .detail-enter-active,.detail-leave-active{
    transition: all 0.3s ease;
  }
  .detail-enter,.detail-leave-to{
    transform: translate3d(100%, 0, 0);
  }
  .detail-enter-to,.detail-leave{
    transform: translate3d(0, 0, 0);
  }
</style>
